<template>
    <div class="page home">
        <swipe :autoplay="4000" v-if="bannerData">
            <swipe-item v-for="(banner, index) in bannerData" :key="index" @click="swipeAction">
                <img :src="banner.imgUrl" class="swipe_img" />
            </swipe-item>
        </swipe>

        <div class="box mt10 gshadow2 radius">
            <notice-bar left-icon="volume-o" text="这是一个通知区域.这是一个通知区域.这是一个通知区域.这是一个通知区域." />
        </div>

        <div class="box mt10 data_show radius">
            <div class="flex_space_between">
                <div class="fs-mini color-normal fw">收益统计</div>
            </div>
            <divider />
            <div class="large_show">

                <van-row class="large_show_card">
                    <van-col span="12"><span class="desc color-light">当日：</span></van-col>
                    <van-col span="12"><span class="desc color-light">当月：</span></van-col>
                </van-row>
                <van-row class="large_show_card">
                    <van-col span="12"> <span class="amount">¥{{serverInfo.profitDay}}</span></van-col>
                    <van-col span="12"><span class="amount">¥{{serverInfo.profitMonth}}</span></van-col>
                </van-row>
            </div>
            <divider />
            <div class="line fs-mini color-light">
                <van-row class="">
                    <van-col span="6">交易笔数</van-col>
                    <van-col span="9">当日： {{serverInfo.tradeCountDay}}</van-col>
                    <van-col span="9">当月： {{serverInfo.tradeCountMonth}}</van-col>
                </van-row>
                <van-row class="mt10">
                    <van-col span="6">交易总金额</van-col>
                    <van-col span="9">当日： {{serverInfo.tradeAmountDay}}</van-col>
                    <van-col span="9">当月： {{serverInfo.tradeAmountMonth}}</van-col>
                </van-row>
                <van-row class="mt10">
                    <van-col span="6">商户数</van-col>
                    <van-col span="9">当月： {{serverInfo.merCountDay}}</van-col>
                    <van-col span="9">累计： {{serverInfo.merCountTotal}}</van-col>
                </van-row>
            </div>
        </div>

        <div class="box mt10">
            <grid clickable icon-size="40px">
                <grid-item v-for="grid in gridData" :key="grid.id" :icon="grid.icon" :text="grid.text" @click="gridClick(grid)"></grid-item>
            </grid>
        </div>
    </div>
</template>

<script>

import { Swipe, SwipeItem, NoticeBar, Divider } from "vant";
import { Grid, GridItem } from 'vant';
import { mapState } from "vuex";

export default {

    components: { NoticeBar, Swipe, SwipeItem, Grid, GridItem, Divider },

    data() {
        return {};
    },

    mounted() { },

    computed: {
        ...mapState({
            bannerData: state => state.homeData.bannerData,
            serverInfo: state => state.homeData.serverInfo
        }),

        gridData() {
            const _data = [
                { id: 1, text: "我的政策", icon: require('@/assets/img/pages/index-edit-tools.png') },
                { id: 2, text: "我的收益", icon: require('@/assets/img/pages/index-group.png') },
                { id: 3, text: "推广码", icon: require('@/assets/img/pages/index-paper-plane.png') },
                { id: 4, text: "常见问题", icon: require('@/assets/img/pages/index-online-conference.png') },
                { id: 5, text: "下级服务商", icon: require('@/assets/img/pages/index-edit-tools.png') },
                { id: 6, text: "业务员", icon: require('@/assets/img/pages/index-group.png') },
                { id: 7, text: "我的商户", icon: require('@/assets/img/pages/index-paper-plane.png') },
            ];
            return _data;
        }
    },

    methods: {

        // banner点击
        swipeAction() {
            this.$router.push("/infoverify");
        },

        // 九宫格点击
        gridClick(grid) {
            const { id } = grid;
            switch (id) {
                case 1: // 我的政策
                    if (this.chargeIsFullInfo()) {
                        return;
                    }
                    this.$router.push("/myRate");
                    break;
                case 2: // 我的收益
                    if (this.chargeIsFullInfo()) {
                        return;
                    }
                    this.$router.push("/myRate");
                    break;
                case 3: // 推广码
                    if (this.chargeIsFullInfo()) {
                        return;
                    }
                    this.$router.push("/inviteCode");
                    break;
                case 4: // 常见问题
                    this.$router.push("/question");
                    break;
                case 5: // 下级服务商
                    if (this.chargeIsFullInfo()) {
                        return;
                    }
                    this.$router.push("/businesslist");
                    break;
                case 6: // 业务员
                    if (this.chargeIsFullInfo()) {
                        return;
                    }
                    this.$router.push("/stafflist");
                    break;
                case 7: // 我的商户
                    if (this.chargeIsFullInfo()) {
                        return;
                    }
                    this.$router.push("/storelist");
                    break;
                default:
                    break;
            }
        },

        chargeIsFullInfo() {
            // 00：未填资料
            // 01：已填基本信息
            // 02：已填身份信息
            // 03：已填结算卡信息
            // 04：资料填写完成
            if (this.serverInfo.certifyStatus != "04") {
                // 3：服务商，4：业务员
                if (this.serverInfo.userType == '3') {
                    this.$router.push("/collectionInfoverify");
                } else if (this.serverInfo.userType == '4') {
                    this.$router.push("/collectionIdCard");
                } else {
                    this.$toast("未知角色，请联系管理员！")
                }
                return true;
            }
            return false;
        }
    }
};
</script>


<style lang="scss" scoped>
@import "@/assets/color.scss";

.home {
    padding-bottom: 80px;

    .box {
        width: 355px;
        overflow: hidden;
        margin: auto;
    }

    /deep/ .van-swipe-item {
        width: 100%;
        height: 234px;
    }

    .swipe_img {
        width: 100%;
        height: 234px;
    }

    .van-notice-bar {
        color: #333;
        font-size: 12px;
        background-color: #fff;
    }

    .data_show {
        background-color: #fff;
        padding: 20px 10px;

        .fw {
            border-left: 6px solid $BG_COLOR;
            padding-left: 6px;
        }
        .large_show {
            .large_show_card {
                // text-align: center;
                .desc {
                    margin: auto;
                    text-align: center;
                    font-size: 12px;
                }
                .amount {
                    margin: auto;
                    text-align: center;
                    color: $BG_COLOR;
                    font-size: 24px;
                }
            }
        }
    }

    .mt10 {
        margin-top: 10px;
    }

    .radius {
        border-radius: 10px;
        overflow: hidden;
    }
}
</style>
